<template>
	<div>
		<div class="head">
			<div @click="$router.back(-1)" class="return"></div>
			分享注册
			<span style="position: absolute;right: 10px;font-size: 14px;color: #460266;" @click="downs">保存二维码</span>
		</div>
		<div class="overlay">
			<div class="overlay-content">
				<div class="expand-invite" align="center">
					<img :src="imgUrl" style="width:50%;" alt="">
					<div>
						<div id="copyText" v-text="url" style="color: transparent;background-color: transparent;position: absolute;z-index: 0;-webkit-user-select: text;word-wrap: break-word;width: 80%;"></div>
					</div>
					<div>
						<div id="copyText2" v-text="inviteCode" style="color: transparent;background-color: transparent;position: absolute;z-index: 0;-webkit-user-select: text;word-wrap: break-word;width: 80%;"></div>
					</div>
					<div class="invite-copy">
						<div class="copyText">
							<span>邀请码:</span>
							<span v-text="inviteCode"></span>
						</div>
						<x-button class="copyBtn copyBtn-Orange" @click.native="copyLink2" style="background-color: #460266;">复制邀请码</x-button>
					</div>
					<div align="center">
						<div style="word-wrap: break-word;padding: 20px 20px 10px;" v-text="url"></div>
						<x-button class="copyBtn copyBtn-Orange" @click.native="copyLink" style="background-color: #460266;">复制邀请连接</x-button>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import { invite } from './../../utils/api';
	let _this;
	export default {
		name: 'Invite',
		data() {
			return {
				imgUrl: '',
				url: '',
				inviteCode: ''
			}
		},
		beforeCreate() {
			_this = this;
		},
		mounted() {
			this.$vux.loading.show({
				text: '加载中...'
			})
			this.getSharing();
			this.getPic();
		},
		methods: {
			getSharing() {
				invite.getQr().then(res => {
					if(res.code == 200) {
						this.imgUrl = res.data.imgUrl;
						this.url = res.data.url;
						this.inviteCode = res.data.uuid;
					}
				})
			},
			copyLink() { //复制邀请链接
				let sUserAgent = navigator.userAgent.toLowerCase();
				let bIsIpad = sUserAgent.match(/ipad/i) == "ipad";
				let bIsIphoneOs = sUserAgent.match(/iphone os/i) == "iphone os";
				window.getSelection().removeAllRanges();
				if(bIsIpad || bIsIphoneOs) {
					var copyDOM = document.querySelector('#copyText'); //要复制文字的节点
					var range = document.createRange();
					// 选中需要复制的节点
					range.selectNode(copyDOM);
					// 执行选中元素
					window.getSelection().addRange(range);
					// 执行 copy 操作
					var successful = document.execCommand('copy');
					try {
						var msg = successful ? 'successful' : 'unsuccessful';
						_this.$vux.toast.text('复制成功', 'middle');
					} catch(err) {
						_this.$vux.toast.text('复制失败', 'middle');
					}
					// 移除选中的元素
					window.getSelection().removeAllRanges();
				} else {
					const Url2 = document.getElementById("copyText").innerText;
					const oInput = document.createElement('input');
					oInput.value = Url2;
					document.body.appendChild(oInput);
					oInput.select(); // 选择对象
					document.execCommand("Copy"); // 执行浏览器复制命令
					oInput.className = 'oInput';
					oInput.style.display = 'none';
					_this.$vux.toast.text('复制成功', 'middle');
				}
			},
			copyLink2() { //复制邀请马
				let sUserAgent = navigator.userAgent.toLowerCase();
				let bIsIpad = sUserAgent.match(/ipad/i) == "ipad";
				let bIsIphoneOs = sUserAgent.match(/iphone os/i) == "iphone os";
				window.getSelection().removeAllRanges();
				if(bIsIpad || bIsIphoneOs) {
					var copyDOM = document.querySelector('#copyText2'); //要复制文字的节点
					var range = document.createRange();
					// 选中需要复制的节点
					range.selectNode(copyDOM);
					// 执行选中元素
					window.getSelection().addRange(range);
					// 执行 copy 操作
					var successful = document.execCommand('copy');
					try {
						var msg = successful ? 'successful' : 'unsuccessful';
						_this.$vux.toast.text('复制成功', 'middle');
					} catch(err) {
						_this.$vux.toast.text('复制失败', 'middle');
					}
					// 移除选中的元素
					window.getSelection().removeAllRanges();
				} else {
					const Url2 = document.getElementById("copyText2").innerText;
					const oInput = document.createElement('input');
					oInput.value = Url2;
					document.body.appendChild(oInput);
					oInput.select(); // 选择对象
					document.execCommand("Copy"); // 执行浏览器复制命令
					oInput.className = 'oInput';
					oInput.style.display = 'none';
					_this.$vux.toast.text('复制成功', 'middle');
				}
			},
			downloadIamge(imgsrc, name) { // 下载图片地址和图片名
				let image = new Image();
				// 解决跨域 Canvas 污染问题
				image.setAttribute("crossOrigin", "anonymous");
				image.onload = function() {
					let canvas = document.createElement("canvas");
					canvas.width = image.width;
					canvas.height = image.height;
					let context = canvas.getContext("2d");
					context.drawImage(image, 0, 0, image.width, image.height);
					let url = canvas.toDataURL("image/png"); // 得到图片的base64编码数据
					let a = document.createElement("a"); // 生成一个a元素
					let event = new MouseEvent("click"); // 创建一个单击事件
					a.download = name || "photo"; // 设置图片名称
					a.href = url; // 将生成的URL设置为a.href属性
					a.dispatchEvent(event); // 触发a的单击事件
				};
				image.src = imgsrc;
			},
			downs() {
				if(window.plus) { // 如果是 android 端或者 ios 端，则调用阿里云的机制
					let OSS = require('ali-oss'); // 导入阿里云的上传机制
					let client = new OSS({
						region: 'oss-cn-hangzhou', // 区域
						// 云账号 AccessKey 有所有 API 访问权限，建议遵循阿里云安全最佳实践，部署在服务端使用 RAM 子账号或 STS ，部署在客户端使用 STS 。
						accessKeyId: 'LTAIe08Wzth2iuA9', // 云账号
						accessKeySecret: 'TmD9XMOvio3lvLXXsM4VV7nKXRdoIc', // 云密匙
						bucket: 'ceet' // 仓库的名称
					});
					// object 表示上传到 OSS 的 Object 名称， localfile 表示本地文件或者文件路径
					client.put(_this.inviteCode + '.png', _this.dataURItoBlob(_this.pic)).then(function(r1) {
						// console.log('put success: %j', r1);
						_this.save___img(r1.url); // 如果成功后会返回，然后把返回的内容中自己需要的进行保存相册操作
						return client.get(_this.inviteCode + '.png');
					}).then(function(r2) {
						// console.log('get success: %j', r2);
						setTimeout(() => {
							client.delete(_this.inviteCode  + '.png'); // 完成成功操作后调用删除操作，删除对应的文件
						}, 1500);
					}).catch(function(err) {
						// console.error('error: %j', err); // 失败后的操作
					});
				} else {
					// 如果是浏览器就可以下载
					_this.downloadIamge(_this.pic, '二维码')
				}
			},
			save___img(picurl) {
				// 创建下载任务
				plus.nativeUI.showWaiting('加载中...');
				var dtask = plus.downloader.createDownload(picurl, {}, function(d, status) {
					// 下载完成
					if(status == 200) {
						plus.gallery.save(d.filename, function() { //保存到相册方法
							plus.nativeUI.closeWaiting();
							_this.$vux.toast.text('已保存到手机相册', 'middle');
						}, function() {
							plus.nativeUI.closeWaiting();
							_this.$vux.toast.text('保存失败，请重试！', 'middle');
						});
					} else {
						_this.$vux.toast.text('下载失败', 'middle');
					}
				});
				dtask.start(); //开始下载
			},
			dataURItoBlob(dataURI) {
				var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0]; // mime类型
				var byteString = atob(dataURI.split(',')[1]); // base64 解码
				var arrayBuffer = new ArrayBuffer(byteString.length); // 创建缓冲数组
				var intArray = new Uint8Array(arrayBuffer); // 创建视图
				for(var i = 0; i < byteString.length; i++) {
					intArray[i] = byteString.charCodeAt(i);
				}
				return new Blob([intArray], {
					type: mimeString
				});
			},
			getPic() { // 获取保存的图片的数据
				invite.getDown().then(res => {
					if(res.code == 200) {
						this.pic = res.msg;
					}
				})
			}
		}
	}
</script>

<style lang="less" scoped="scoped">
	.copyText {
		text-align: center;
		font-size: 20px;
		padding: 10px 25px;
	}
	
	.copyBtn {
		width: 210px;
		background: #3966e8;
		color: #FFFFFF !important;
	}
	
	.copyBtn-Orange {
		background: #e88036;
	}
	/*.qrcode {
		text-align: center;
		margin: 0;
		position: relative;
		padding: 5px;
	}*/
	
	.overlay {
		padding-top: 40px;
	}
</style>